import React,{PureComponent} from "react";
import {actionCreator} from "./store";
import {connect} from "react-redux";

class LoginAndRegTitle extends PureComponent{

    render() {
        return (
            <div style={titleWrapperStyle}>
                <span style={titleStyle}>{this.props.title}</span>
                <span style={cancelStyle} onClick={this.props.clickCancel}>取消</span>
            </div>
        );
    }

}

const dispatchState = (dispatch) => {
    return {
        clickCancel() {
            const action = actionCreator.updateLoginAndRegisterState(false, false);
            dispatch(action);
        }
    }
};


export default connect(null, dispatchState)(LoginAndRegTitle);

const titleWrapperStyle = {
    position: "relative",
    height: 42,
    lineHeight: "42px",
    borderBottom: "solid 1px #eee",
};

const titleStyle = {
    display: "inline-block",
    width: 40,
    height: 42,
    textAlign: 'center',
    position: "absolute",
    left: 10,
    fontSize: 16,
    color: "#333",
};

const cancelStyle = {
    display: "inline-block",
    width: 40,
    height: 20,
    position: "absolute",
    right: 10,
    cursor:"pointer",
};

